<template>
  <div class="allPage">
    <el-row :gutter="15">
      <el-col :span="24">
        <el-card class="box-card-top">
          <div slot="header" class="cardClass_header">
            <h3>现金成本占比</h3>
          </div>
          <!-- 表格开始 -->
          <el-table
            :data="tableData"
            stripe
            size="small"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="id"
              type="index"
              label="序号"
              width="50px"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="zongshouru"
              label="总收入"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="zongzhichu"
              label="总支出"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="lirun"
              label="利润"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="zhanbi"
              label="占比"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center" width="220">
              <template slot-scope="scope">
                <el-button
                  type="warning"
                  size="mini"
                  icon="el-icon-edit"
                  @click="open('修改现金成本占比', scope.row)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 表格结束 -->
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-card class="box-card-bottom">
          <div>
            <NewsalestrendscashCost></NewsalestrendscashCost>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card-bottom">
          <div>
            <getSalesOrdersCost></getSalesOrdersCost>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <addcashCost ref="addcashCostref"></addcashCost>
  </div>
</template>

<script>
import NewsalestrendscashCost from "@/components/dataSreening/salesData/NewsalestrendscashCost";
import getSalesOrdersCost from "@/components/dataSreening/salesData/getSalesOrdersCost";
import { querycashcost } from "@/apis/employee/cashCost.js";
import addcashCost from '@/components/employee/addcashCost'
export default {
  name: "salesData",
  components: {
    NewsalestrendscashCost,
    getSalesOrdersCost,
    addcashCost
  },
  data() {
    return {
    total: null, // 分页
      loading: false, // 加载
      hidden: false, // 控制搜索表单显示状态
      // 表格开始
      tableData: [],
      // 表格结束
      ruleForm: {
        key: "zongshouru",
        value: "",
        flag: 0,
        pageNum: 1,
        pageSize: 5,
      },
      rules: {
        key: [{ required: true, message: "请选择查询字段", trigger: "blur" }],
      },
    };
  },
  created() {
    this.search();
  },
  methods: {
    open(title, row) {
      this.$refs.addcashCostref.show(title, row);
    },
    //搜索方法
    search() {
      const _this = this;
      _this.loading = true;
      querycashcost(_this.ruleForm).then((res) => {
        _this.tableData = res.data;
        _this.total = res.total;
        _this.loading = false;
      });
    },
    // 重置
    resetForm(formName) {
      let _this = this;
      this.$refs[formName].resetFields();
      this.search(_this.ruleForm);
      this.ruleForm.pageNum = 1; // 查询重置页数
    },
  },
  // 新增/修改弹窗
};
</script>

<style scoped>
.box-card-top {
  height: 170px;
  margin-bottom: 15px;
}

.box-card-bottom {
  height: calc(100vh - 315px);
}
</style>